@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@automattic/typography/styles/fonts";

.navigator-header {
	display: none;
	margin-bottom: 30px;

	@include break-large {
		display: block;
	}
}

.navigator-header__heading {
	margin-bottom: 8px;
	color: var(--color-neutral-100);
	text-wrap: pretty;

	h2 {
		font-family: Recoleta, sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: $font-title-large;
		line-height: 40px;
		letter-spacing: -0.32px;
	}

	.button.is-borderless .gridicon {
		top: 4px;
	}

	.premium-badge {
		margin-inline-start: 2px;
	}
}

.navigator-header__description {
	font-size: $font-body-small;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.15px;
	color: var(--color-neutral-60);
	margin: 0;
	text-wrap: pretty;
}
